<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link th:href="@{/shop/assets/css/bootstrap.css}" rel="stylesheet" type="text/css" />

<link th:href="@{/shop/assets/css/common.css}" rel="stylesheet" type="text/css" />
<script th:src="@{/shop/js/jquery-1.9.1.min.js}" type="text/javascript"></script>

<script th:src="@{/shop/js/jquery.SuperSlide.2.1.1.js}" type="text/javascript"></script>
<script th:src="@{/shop/js/bootstrap.min.js}" type="text/javascript"></script>
<script th:src="@{/shop/js/common.js}" type="text/javascript"></script>
<script th:src="@{/shop/js/layer/layer.js}" type="text/javascript"></script>
<script th:src="@{/shop/js/offlights.js}" type="text/javascript"></script>
<script th:src="@{/shop/js/jquery.nicescroll.js} " type="text/javascript"></script>
    <script type="text/javascript" th:src="@{/shop/js/ckplayer/ckplayer.js}" charset="utf-8"></script>
<title>播放</title>
</head>

<body>
<div id="header_top">
    <div class="page_header">
        <div class="header_style">
            <div class="clearfix">
                <a th:href="@{#}" class="logo_style"><img th:src="@{/shop/assets/images/logo.png}" width="100px"/></a>
                <ul class="nav_list">
                    <li class="nav_link"><a th:href="@{/video/shophome}" class="Channel_name"><i class="i icon_home"></i>首页</a></li>
                    <li class="nav_link Channel_link">
                        <a href="javascript:" class="Channel_name"><i class="i icon_nav"></i>类别<i
                                class="i i_arw2"></i></a>
                        <div class="Channel_nav_list">
                            <ul class=" clearfix">
                                <li class="Channel_color"><a th:href="@{/video/list_page}"><i class="icon_TV"></i>小学</a>
                                </li>
                                <li class="Channel_color split_line"><a th:href="@{/#}"><i class="icon_TV"></i>初中</a>
                                </li>
                                <li class="Channel_color split_line"><a th:href="@{/#}"><i class="icon_TV"></i>高中</a>
                                </li>
                                <li class="Channel_color split_line"><a th:href="@{/#}"><i class="icon_TV"></i>大学</a>
                                </li>


                            </ul>
                        </div>
                    </li>
                </ul>
                <div class="search_style">
                    <form th:action="@{/video/findListByName}">
                        <input name="brief" type="text" value="搜索" class="search" onfocus="this.value = '';" target="_blank"
                               onblur="if (this.value == '') {this.value = 'Search';}" autocomplete="on"/>
                        <button name="" type="submit" class="button_submit" onclick="submit_btn()"><i
                                class="icon_search"></i>搜索
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!--视频播放-->
    <div class="Video_playback_style">
        <div class="page_style clearfix">
            <!--面包屑-->
            <div class="Location_link">
                <em></em><a th:href="@{/shophome}">首页</a> &lt; <a th:href="@{/#}">科目</a> &lt; <span th:text="${videoSingle.getGrade()}">初中</span><span th:text="${videoSingle.getSubject()}">英语</span>
            </div>
            <!---->
            <div class="Video_playback">
                <div class="playback_title" th:text="${videoSingle.getVideoname()}">八年级 第1章 <span class="label_name"><a th:href="@{/#}" th:text="${videoSingle.getGrade()}">初中</a></span><span
                        class="label_name"><a th:href="@{/#}" th:text="${videoSingle.getSubject()}">英语</a></span><span class="label_name"><a th:href="@{/#}" th:text="${videoSingle.getTag()}">八年级</a></span>
                </div>
                <div class="page_style clearfix" id="videoArea">
                    <div id="a1" class="videoArea"></div>

                    <div id="playerlist_style">
                        <div id="a2" class="listcontrol-btn close_btn" title="收起列表"><i
                                class="site-icons-play icon-listcontrol-right"></i></div>
                        <div id="a3" class="show_btn" title="展开列表">
                            <div class="listcontrol-pack-con"><i class="site-icons-play icon-listcontrol-left"></i>展开列表
                            </div>
                        </div>
                        <div class="listcontrol_content">
                            <div id="playerlist">
                                <div class="hd">
                                    <ul>
                                        <li>章节<i class="jt"></i></li>
                                        <li>介绍<i class="jt"></i></li>
                                    </ul>
                                </div>
                                <div class="bd" id="videomenu_style">
                                    <ul class="Episodes_list clearfix">
                                        <!-- class="Episodes_list clearfix" -->
                                        <!--<h4><a href="javascript:void(0);" th:onclick="'javascript:getSC2('+${video1.id }+')'" >收藏</a></h4>-->
                                        <li id="vli_1" th:each="video,iterStat:${videos1}" th:onclick="'javascript:playvideo('+0+')'" class="volume selected">
                                            <a th:href="@{/video/playback_page(id=${video.getId()})}" th:title="${video.getVideoname()}" rseat="sht_1">
                                                <span th:text="${video.getTimelong()}">01:34</span><span>&nbsp;min</span>&nbsp;&nbsp;
                                                <span th:text="${video.getVideoname()}">第一章：概述</span>
                                            </a>
                                        </li>

                                    </ul>
                                    <ul>
                                        <li class="clearfix marginq">
                                            <div class="l_f information_img"><img th:src="@{/shop/assets/video/d9.jpg}"></div>
                                            <div class="r_f play_information_b ">
                                                <dl>
                                                    <dt th:text="${videoSingle.getGrade()}">八年级</dt>
                                                    <dd class="mt10 clearfix"><label>名称：</label><span class="l_f"><a
                                                            th:text="${videoSingle.getVideoname()}">第一师范</a></span></dd>
                                                    <dd class="mt10 clearfix"><label>科目</label><span class="l_f"><a
                                                            th:text="${videoSingle.getSubject()}">八年级英语</a></span></dd>
                                                    <dd class="mt10 clearfix"><label>时长：</label><span class="l_f"><a
                                                            th:text="${videoSingle.getTimelong()}">90</a>min</span></dd>
                                                </dl>
                                            </div>
                                        </li>
                                        <li class="marginq jieshao"><label>简介：</label><span th:text="${videoSingle.getDetail()}">沈航机构提供，由#####等主讲的教育视频。该视频讲述了英文翻译的故事。</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <script>jQuery("#playerlist").slide({delayTime: 0});</script>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!---->
    <div class="play_video_b">
        <div class="page_style">
            <div class="l_f  frequency" id="play_vod_hits"><em class="icon_tup"></em><i th:text="${videoSingle.getTimes()}">9,020</i>次播放</div>
            <div class="l_f  frequency"><span><a th:href="@{/video/pay}" target="_blank">立即购买</a></span></div>
            <div class="clear"></div>
        </div>
    </div>


    <!--相关-->
    <div class="page_style">
        <div class="Related_content">

            <!--评论-->
            <div class="single">
                <h2>评论</h2>
                <ul class="single_list">
                    <li th:each="comment,iterStat:${comments}">
                        <div class="preview"><a href="#">
                            <div class="imgs"><img th:src="@{/shop/assets/images/2-1.jpg}" class="img-responsive" alt="">
                            </div>
                        </a></div>
                        <div class="data">
                            <div class="title"><span th:text="${comment.user.username}">Movie</span> /
                                <span th:text="${#dates.format(comment.commenttime, 'yyyy-MM-dd hh:mm:ss')}"> 2 hours ago</span> / <a href="#">reply</a></div><br>
                            <p class="data_p" th:text="${comment.commentdetail }">Lorem ipsum dolor sit amet, consectetuer adipiuscing elit, sed diam nonummy nibh euismod
                                tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
                                quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
                                consequat.</p>
                        </div>
                        <div class="clearfix"></div>
                        <hr><br>
                    </li>
                    <br><br><br><hr>
                </ul>
            </div>

            <!--评论结束-->


            <div class="Related_title"><span>相关视频</span> <a href="javascript:" class="change_link"><i
                    class="icon_change"></i>换一批</a></div>
            <div class="list_v_content ">
                <ul class="Notice_list">
                    <li class="first_content bg" th:each="video2,iterStat:${videos2}">
                        <a th:href="@{/video/preview(id=${video2.getId()})}" class="pic ">
                            <img th:src="@{/shop/assets/video/14.jpg}" width="100%">
                            <span class="first_bg"><i class="icon_bf"></i></span>
                        </a>
                        <a target="_blank" th:href="@{/video/preview(id=${video2.getId()})}" class="bq">相关视频</a>
                        <div class="tc">
                            <p class="tit">
                                <a target="_blank" href="#">名称：</a><span th:href="@{/video/preview(id=${video2.getId()})}" th:text="${video2.getVideoname()}">初中英语</span></p>
                        </div>
                    </li>

                </ul>
            </div>
        </div>
    </div>
    <!--底部样式-->
    <div class="footer_style">
        <div class="footer">
            <div class="copys copys-list clearfix">
                <a href="#">网络文化经营许可证 京网文[2014]xxxxx-236号</a>
                <a href="#">京卫网审[2013]第0209号 网络110报警服务</a>
                <a href="#">药品服务许可证(京)-经营2222-0029</a>
                <a href="#">节目制作经营许可证京字670号</a>
            </div>
            <div class="link_name">
                <a href="#">关于我们</a>|<a href="#">媒体合作</a>|<a href="#">开放平台</a>|<a href="#">广告服务</a>|<a href="#">联系我们</a>|<a
                    href="#">工作机会</a>|<a href="#">友情链接</a></div>
            <div class="Copyright">Copyright © 2004-2017 视频名称（xx.com）All rights reserved.</div>

        </div>

    </div>
    <!-- 代码 开始 -->
    <div class="go-top dn" id="go-top">

        <a href="zhuce.html" target="_blank" class="feedback"></a>
        <a href="javascript:;" class="go"></a>
    </div>
</div>
</body>
</html> 


 <script>
     // <!--滚动条-->
 $(".bd").niceScroll({  
	cursorcolor:"#888888",  
	cursoropacitymax:1,  
	touchbehavior:false,  
	cursorwidth:"5px",  
	cursorborder:"0",  
	cursorborderradius:"5px"  
});
    function playerstop() {
            setTimeend();
        }
        function setTimeend() {//获取下一部视频的播放ID
            nowD++;
            if (nowD >= videoarr.length ) {
                nowD = 0;
            }
            playvideo(nowD);
        }
        var nowD = 0;//目前播放的视频的编号(在数组里的编号)
        var frontTime = false;//前置广告倒计时是否在运行中
        var frontHtime = false;//后置广告是否在进行中
        var videoarr = new Array();//新建一个数组来存flash端视频地址，添加方法就像下面一样
        // videoarr.push('http://player.video.qiyi.com/2e97d0a59f6278c62046517b4f2f6728/0/2715/v_19rraev46g.swf-albumId=205153601-tvId=637184900-isPurchase=0-cnId=2');
        // videoarr.push('/shop/video/1_0.mp4');
        // videoarr.push('/shop/video/1_0.mp4');
        // videoarr.push('http://movie.ks.js.cn/flv/2012/02/6-1.flv');
        // videoarr.push('http://movie.ks.js.cn/flv/2011/11/8-1.flv');
        videoarr.push('http://movie.ks.js.cn/flv/2014/04/24-2.flv');

            for (i = 0; i < '${videos1}'.length; i++) {//这里是用来改变右边列表背景色
               videoarr.push('${videos1.}')
            }


        var html5arr = new Array();//新建一个数组来保存HTML5端用到的视频地址，注意，因为本演示只有一种mp4文件，所以html5下所有用到的视频地址都是相同的，请见谅，另外，该数组是一个二维数组
        // html5arr.push(['http://player.video.qiyi.com/2e97d0a59f6278c62046517b4f2f6728/0/2715/v_19rraev46g.swf-albumId=205153601-tvId=637184900-isPurchase=0-cnId=2']);
        // html5arr.push(['/shop/video/1_0.mp4']);
        // html5arr.push(['/shop/video/1_0.mp4']);
        // html5arr.push(['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4']);
        // html5arr.push(['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4']);
        html5arr.push(['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4']);
        //播放
        function playvideo(n) {
            nowD = n;
            var flashvars = {
                f: videoarr[n],  //使用videoarr向播放器发送视频地址进行播放
                c: 0,             //调用 ckplayer.js 配置播放器
                p: 1,             //自动播放视频
                e: 0,             //视频结束后的动作，0是调用js函数
                my_url: encodeURIComponent(window.location.href)//本页面地址
            };
           // for (i = 0; i < videoarr.length; i++) {//这里是用来改变右边列表背景色
//                if (i != nowD) {
//                    CKobject._K_('vli_' + i).style.backgroundColor ='#262626';
//                }
//                else {
//                    CKobject._K_('vli_' + i).style.backgroundColor ='#DAF2FF';
//                }
//            }
            var video = ['http://player.video.qiyi.com/2e97d0a59f6278c62046517b4f2f6728/0/2715/v_19rraev46g.swf-albumId=205153601-tvId=637184900-isPurchase=0-cnId=2'];
            CKobject.embed('js/ckplayer/ckplayer.swf', 'a1', 'ckplayer_a1', '100%', '100%', false, flashvars, html5arr[n]);
        } 
        playvideo(0);

 </script>

<script type="text/javascript">
$(function() { 
	$("#videoArea").fix({
		float : 'right',	//default.left or right
		//minStatue : true,
		skin : 'green',	//default.gray or blue
		durationTime :300
	});
});
 </script>
<script>
/*********搜索*********/
function submit_btn(){
	 $(".search_style input[type$='text']").each(function(n){
		  if($(this).val()=="")
          {
               
			   layer.alert("搜索框不能为空！",{
                title: '提示框',				
				icon:0,								
          }); 		    
            return false;            
          } 
		 else{
			 location.href="search_page.html";
			 
			 }
		 })		
}
</script>